<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // 类式组件中加一个state属性
    class App extends React.Component{
        //1、由于类默认不绑定this，所以我们要自己修改指向
        //2、而constructor中this指向实例化对象，
        //3、所以我们可以在里面使用this.handle使用原型上的handle方法，并且使用bind修改这个事件函数指向（让this指向实例化对象，而在constructor里，实例化对象就是this）
        constructor(){
            //super()就是将父类中的this对象继承给子类的
            // ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）
            // ES6的继承，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
            super()
            //这里bind修改指向后，返回一个新的事件函数
            //然后给组件实例新增一个事件函数handle
            //所以用的是组件实例的
           this.handle = this.handle.bind(this)
           //此时组件实例上也有handle，这样事件就可以使用，且this指向组件实例
        }
        //4、
        // 实例上的方法
        state = {
            count :0
        }
        render(){
            const {count} = this.state;
        return(
           <div>
            <button onClick={this.handle}>点击增加数字</button>
            <h1 style={{color:'red',fontSize:'100px'}}>{count}</h1> 
            </div>
            )
        }
    //一般来说事件函数，this指向实例化对象，不会指向这个button，因为要修改的式state的属性，所以要用到实例化对象身上的state属性。

    //jsx中默认不绑定this，类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。
    //本质:
    // 如果你传递一个函数名给一个变量，然后通过在变量后加括号()来调用这个方法，此时方法内部的this的指向就会丢失
    handle(){
        alert(1)
        console.log(this);
        }
    }
        const root = ReactDOM.createRoot(document.getElementById('app'));
        root.render(<App />)
  </script>
</body>

</html>